<template>
	<view class="zai-box">
		<view class="zai-header">
			<image src="../../static/logo.png" mode='aspectFit' class="zai-logo"></image>
			<view class="zai-title">AInotes</view>
			<view class="biaoyu">打通AI学习最后一公里！</view>
		</view>
		<view class="zai-form">
			<input v-model="username" class="zai-input" type='text' placeholder="请输入用户名" />
			<input v-model="password" class="zai-input" type="password" placeholder="请输入密码"/>
			<button @click='login()' class="zai-btn">立即登录</button>
			<navigator url="../register/register" hover-class="none" class="zai-label">
				还没有账号？点此注册
			</navigator>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			username: '',
			password: ''
		};
	},
	methods: {
		login() {
			if (this.username === '') {
				uni.showToast({ title: '请输入用户名', icon: 'none' });
			} else if (this.password === '') {
				uni.showToast({ title: '请输入密码', icon: 'none' });
			} else {
				// 模拟登录逻辑
				const userList = uni.getStorageSync('userList') || [];
				const user = userList.find(u => u.username === this.username && u.password === this.password);

				if (user) {
					uni.setStorageSync('userInfo', { username: user.username, sex: user.sex });
					uni.showToast({ title: '登录成功', icon: 'success' });
					setTimeout(() => {
						uni.switchTab({ url: '/pages/index/index' });
					}, 1000);
				} else {
					uni.showToast({ title: '账号或密码错误', icon: 'none' });
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.zai-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: #f9f9f9;
}

/* 顶部区域 */
.zai-header {
	text-align: center;
	margin-bottom: 60rpx;
}

.zai-logo {
	width: 180rpx;
	height: 180rpx;
	margin-bottom: 20rpx;
}

.zai-title {
	font-size: 48rpx;
	font-weight: bold;
	color: #7e57c2;
	margin-bottom: 10rpx;
}

.biaoyu {
	font-size: 28rpx;
	color: #999;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	margin-bottom: 40rpx;
}

/* 表单区域 */
.zai-form {
	width: 80%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.zai-input {
	width: 100%;
	padding: 20rpx;
	margin-bottom: 20rpx;
	font-size: 28rpx;
	background-color: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 12rpx;
	box-shadow: 0 4rpx 6rpx rgba(0, 0, 0, 0.1);
}

.zai-btn {
	width: 100%;
	padding: 20rpx;
	font-size: 32rpx;
	color: #fff;
	background-color: #7e57c2;
	border: none;
	border-radius: 12rpx;
	text-align: center;
	box-shadow: 0 4rpx 6rpx rgba(0, 0, 0, 0.2);
	cursor: pointer;
}

.zai-btn:active {
	background-color: #6a46af;
	transform: translateY(1rpx);
}

.zai-label {
	font-size: 26rpx;
	color: #999;
	margin-top: 20rpx;
	text-decoration: underline;
	text-align: center;
}
</style>
